<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <style>
        ul {
			list-style: none;
			margin: 0;
			padding: 0;

		}

		.cart-list {
			position: absolute;
			top: 10px;
			right: 10px;
			padding: 10px;
			width: 200px;
			/*height: 400px;*/
			border: 1px solid #ddd;
			/*overflow-y:auto;*/
		}

		.cart-list h4 {
			margin: 0;
			padding-bottom: 5px;
			border-bottom: 1px solid #ddd;
		}

		.cart-list img {
			width: 60px;
		}

		.cart-list li {
			position: relative;
			height: 200px;
		}

		.cart-list .btn-close {
			position: absolute;
			top: 0;
			right: 0;
			padding: 5px;
		}

		.cart-list .btn-close:hover {
			background-color: #f00;
			color: #fff;
		}

		.goods-list img {
			width: 200px;
		}
    </style>
</head>
<body>
    <div class="flyCart">
		<div class="goods-list">
			<h4>产品列表</h4>
			<ul>
				<li>
					<img src="images/g1.jpg">
					<p>
						<button>添加到购物车</button>
					</p>
					<p>亚瑟士ASICS跑步鞋2015春夏新款运动鞋男款避震跑鞋KAYANO T4H2N-9001 橙色/白色 42</p>
				</li>
				<li><img src="images/g2.jpg">
					<p>
						<button>添加到购物车</button>
					</p>
					<p>亚瑟士ASICS运动鞋2015春夏新款跑步鞋女鞋稳定跑鞋KAYANO T4H7N-0701 黄色/白色 37.5</p>
				</li>
				<li><img src="images/g3.jpg">
					<p>
						<button>添加到购物车</button>
					</p>
					<p>亚瑟士ASICS跑步鞋春夏透气稳定女款跑鞋 KAYANO T4N5N-3591 玫红色/黑色 37.5</p>
				</li>
				<li><img src="images/g4.jpg">
					<p>
						<button>添加到购物车</button>
					</p>
					<p>亚瑟士ASICS高帮运动休闲鞋男鞋运动鞋DOUBLEH54XJ-5050 黑色/黑色 40.5</p>
				</li>
				<li>
					<img src="images/g5.jpg">
					<p>
						<button>添加到购物车</button>
					</p>
					<p>Onitsuka Tiger运动休闲鞋女COLORADO D4S6N-1850 珊瑚色/淡灰色 37.5</p>
				</li>
			</ul>
		</div>
		<div class="cart-list">
			<h4>购物车列表</h4>
			<ul>
			</ul>
		</div>
	</div>
    <script>
        $.fn.extend({
            fly(){
                let flag=true;
                $(".goods-list").find("button").on("click",function(){
                    if(flag==false){
                        return;
                    }
                    flag=false;

                    let $cloneLi=$(this).parents("li").clone(true);
                    let $cloneImg=$cloneLi.find("img").clone(true);
                    $cloneLi.find("button").remove();
                    $cloneLi.append("<span class='btn-close'>X</span>")

                    let posObj=$(this).parents("li").find("img").offset()
                    posObj.position="absolute"
                    $cloneImg.css(posObj)
                    $(this).parents("li").append($cloneImg)

                    let target=$(".cart-list").offset()
                    target.top=target.top+$(".cart-list").outerHeight()
                    target.position="absolute"
                    target.width=0
                    target.height=0
                    $cloneImg.animate(target,1500,function(){
                        $cloneImg.remove()
                        $(".cart-list ul").append($cloneLi)
                        flag=true
                    })
                })
                $(".cart-list").on("click",".btn-close",function(){
                    $(this).parents("li").remove()
                })
            }
        })

        $(function(){
            $(".flyCart").fly()
        })
    </script>
</body>
</html>